<template>
    <div class="newDetail">
        <h1 class="newDetail-title">{{ newInfo.title }}</h1>
        <p class="newDetail-substr">
            <span>发表时间:{{ newInfo.add_time | dataFormat }}</span>
            <span>点击:{{ newInfo.click }}次</span>
        </p>
        <hr class="newDetail-hr">
        <div class="newDetail-content" v-html="newInfo.content"></div>
        <comment :id="this.id"></comment>
    </div>
</template>

<script>
// 加载评论子组件
import Comment from "../comment/Comment.vue";

export default {
  data() {
    return {
      id: this.$route.params.id, //获取到url地址中路由传递的参数
      newInfo: {}
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      this.$http.get(`api/getnew/${this.id}`).then(res => {
        // console.log(res.body.message)
        this.newInfo = res.body.message[0];
      });
    }
  },
  components: {
    Comment
  }
};
</script>

<style lang="scss">
.newDetail {
  background-color: white;
  padding: 4px;
  .newDetail-title {
    text-align: center;
    color: red;
    font-size: 17px;
    font-weight: bold;
    margin: 8px 0;
  }
  .newDetail-substr {
    display: flex;
    justify-content: space-between;
    color: #26a2ff;
  }
  .newDetail-content {
    img {
      width: 100%;
    }
  }
  .newDetail-hr {
    border: 1px solid silver;
  }
}
</style>

